<?php

use app\assets\BackendAsset as Asset;
use \app\models\tableModel\AdminRoleModel;

/* @var $this yii\web\View */
/* @var $userInfo object */
/* @var $menu string */

Asset::register($this);
?>
<div class="layout-wrapper" id="app" v-show="loadOver" style="display: none">
    <el-container class="main-container">
        <el-header class="header" height="auto" id="headerWrapper" ref="mainScrollShadow">
            <div :style="{width: menu.leftWidth + 'px'}" class="float-left">
                <div class="header-left" id="headerLeft">
                    <el-row>
                        <el-col :span="24">
                            <div class="collapse-btn logo-coll thumb" @click="openColMenu">
                                <img src="/images/backend/logo2.png" alt="">
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="float-left" :style="{width: 'calc(100% - ' + menu.leftWidth + 'px)'}">
                <el-row :inline="true">
                    <el-col :span="24" class="top-menu-wrapper">
                        <el-menu :default-active="menu.topIndex" class="el-menu-demo"
                                 mode="horizontal" background-color="#20a0ff"
                                 text-color="#a4cdf9" active-text-color="#ffffff"
                                 v-if="Object.keys(menu.topList).length > 1">
                            <el-menu-item v-for="(item, key) in menu.topList" :index="item['key']"
                                          @click="topTabClick(item['key'])" v-text="item['label']">
                            </el-menu-item>
                        </el-menu>
                        <div v-else>&nbsp;</div>
                    </el-col>
                </el-row>
            </div>
            <div class="header-right float-left">
                <el-dropdown class="user-info">
                    <el-row class="no-font-size">
                        <div class="row">
                            <div class="user-avatar">
                                <img src="<?=$userInfo->avatar?>" alt="<?= $userInfo->nick_name ?>">
                            </div>
                        </div>
                        <div class="row user-name text-more-ellipsis">
                            <span class="user-name-span">
                               <?= $userInfo->nick_name ?>
                            </span>
                        </div>
                        <div class="row">
                            <span class="el-dropdown-link el-dropdown-selfdefine">
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                        </div>
                    </el-row>
                    <el-dropdown-menu slot="dropdown" class="balance-dropdown-wrapper">
                        <?php if (AdminRoleModel::checkAuth('backend/cache/*')) { ?>
                            <el-dropdown-item @click.native="clearAllCache">
                                <a class="do-button">
                                    <span class="icon-font icon-exit"></span>
                                    <span>清除缓存</span>
                                </a>
                            </el-dropdown-item>
                        <?php } ?>
                        <el-dropdown-item @click.native="loginOut">
                            <a class="do-button">
                                <span class="icon-font icon-exit"></span>
                                <span>退出</span>
                            </a>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <div class="clean-30px"></div>
        <el-container class="menu-wrapper" :style="menu.bottomStyle">
            <el-aside id="menuSide" class="menuSide menu-header animated infinite" width="auto">
                <div class="content-container">
                    <el-scrollbar class="left-menu-scroller">
                        <el-menu class="sidebar-el-menu" background-colors="#242f42" text-colorss="#bfcbd9"
                                 :collapse="collapse" :default-active="tab.activeIndex" :style="menu.leftStyle"
                                 :collapse-transition="true">

                            <div v-for="(item, key) in menu.leftList" :key="key">
                                <el-submenu v-if="item['children']&&Object.keys(item['children']).length>0"
                                            :popper-class="'left-sub-menu-' + item['key']"
                                            :index="item['key']">
                                    <template slot="title">
                                        <i :class="item.font_icon"></i>
                                        <span slot="title" v-text="item.label" class="menu-name"></span>
                                    </template>
                                    <el-menu-item v-for="(item_sub, key_sub) in item.children"
                                                  :key="key_sub" :data-path="key + '-' + key_sub"
                                                  @click="leftMenuLink(item_sub, item)"
                                                  v-text="item_sub.label" :index="item_sub['key']">
                                    </el-menu-item>
                                </el-submenu>

                                <el-menu-item v-else :index="item.key" @click="leftMenuLink(item)">
                                    <i :class="item.font_icon" :style="getStyleIcon(item['key'])"></i>
                                    <span slot="title" v-text="item.label"></span>
                                </el-menu-item>
                            </div>
                        </el-menu>
                    </el-scrollbar>
                </div>
            </el-aside>
            <el-main id="contentWrapper" class="content-box animated infinite">
                <div class="tab-wrapper" id="tabWrapper" ref="tabWrapper" style="display: none;" v-show="loadOver">
                    <span class="el-icon-arrow-left" v-if="tab.showLeftMore" @click="leftMoreClick"></span>
                    <div :class="tab.showLeftMore&&tab.showRightMore? 'has-scroll' : ''"
                         class="tab-list">
                        <div class="tab-list-view">
                            <div v-for="(item, key) in tab.list" :id="'tab-' + item.key" @click="tabSelected(item.key)"
                                 class="tab-item" :class="getTabItemClass(item.key)"
                                 @contextmenu.prevent="showRightMenu($event, item.key)">
                                <i class="el-icon-s-home" v-show="item.key==tab.indexKey"></i>
                                <span v-text="item.label"></span>
                                <i class="close-icon el-icon-close" v-show="item.key!=tab.indexKey"
                                   @click.stop="closeTab(key)"></i>
                                <i class="break"></i>
                                <div class="bg"></div>
                            </div>
                        </div>
                    </div>
                    <span class="el-icon-arrow-right" v-if="tab.showRightMore"
                          @click="rightMoreClick"></span>
                    <div class="tab-content-list bg-white"  v-loading.lock="openLoading"
                         element-loading-text="加载中..." element-loading-spinner="">
                        <div v-for="(item, key) in tab.list" v-show="isShowTabItem(item.key)">
                            <iframe width="100%" height="100%" frameborder="0" :src="item.url"
                                    :id="'iframe_' + item.key" class="content-frame" :data-key="key">
                            </iframe>
                        </div>
                    </div>
                    <div id="leftMenuWrapper" class="left-menu-wrapper" :style="rightClickStyle">
                        <div class="row font-second pointer" @click="openTabNewTab">
                            新标签打开
                        </div>
                        <div class="row font-second pointer" @click="reloadTab">
                            刷新当前选项卡
                        </div>
                        <div class="row font-second pointer" @click="closeTabLeftMenu">
                            关闭当前选项卡
                        </div>
                        <div class="line"></div>
                        <div class="row font-second pointer" @click="closeOtherTabs">
                            关闭其他选项卡
                        </div>
                        <div class="row font-second pointer" @click="closeRightAll">
                            关闭右侧全部选项卡
                        </div>
                        <div class="row font-second pointer" @click="closeLeftAll">
                            关闭左侧全部选项卡
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>

    <!-- 更新缓存 -->
    <?= $this->render('../common/clear-cache.php', []);?>
    <!-- 更新缓存 -->
</div>

<?= Asset::addCss($this, 'css/backend/index.css?v=0.002'); ?>
<?= Asset::addScript($this, "@web/js/backend/index.js"); ?>
<?= Asset::addScript($this, "@web/js/focus-outside.js"); ?>
<?= $this->registerJs(
    "instance = new App('" . $menu . "');"
); ?>
